<template>
  <div class="page">
    <!-- <div class="weui-tab">
      <div class="weui-navbar">
        <block v-for="(item, index) in categories" :key="index">
          <div :id="index" :class="{'weui-bar__item_on':activeIndex == index}" class="weui-navbar__item" @click="tabClick">
            <div class="weui-navbar__title">{{ item.name }}</div>
          </div>
        </block>
        <div class="weui-navbar__slider" :class="navbarSliderClass"></div>
      </div>
      <div class="weui-tab__panel">
        <div class="weui-tab__content" :hidden="activeIndex != 0">
          <div class="list_panel">
            <div class="list" v-for="(item, index) in goods" :key="index">
              <card :primaryTitle="item.title" :primarySubtitle="item.subtitle" :media="item.media"></card>
            </div>
          </div>
        </div>
        <div class="weui-tab__content" :hidden="activeIndex != 1">选项二的内容</div>
        <div class="weui-tab__content" :hidden="activeIndex != 2">选项三的内容</div>
      </div>
    </div> -->
    <div class="weui-panel weui-panel_access">
      <div class="weui-panel__hd">{{ category.name }}</div>
      <div class="weui-panel__bd">
        <div class="weui-flex" v-for="(item, index) in products" :key="index">
          <div class="weui-flex__item">
            <navigator :url="'/pages/detail/main?id=' + item.id">
              <card :primaryTitle="item.name" :content="item.description" :media="CDN + '/products/' + item.covers[0]"></card>
            </navigator>
          </div>
          <!-- <div class="weui-flex__item">
            <navigator :url="'/pages/detail/main?id=' + item[0].id">
              <card :primaryTitle="item[0].name" :media="CDN + '/products/' + item[0].covers[0]" :menuActions="menuActions" :rightAction="rightAction"></card>
            </navigator>
          </div>
          <div class="weui-flex__item">
            <navigator :url="'/pages/detail/main?id=' + item[1].id">
              <card :primaryTitle="item[1].name" :media="CDN + '/products/' + item[1].covers[0]" :menuActions="menuActions" :rightAction="rightAction"></card>
            </navigator>
          </div> -->
        </div>
      </div>
      <div class="weui-panel__ft">
        <div class="weui-loadmore weui-loadmore_line">
          <div class="weui-loadmore__tips weui-loadmore__tips_in-line">已经加载全部数据</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import card from '@/components/card'
// import QueryCategories from '@/graphql/Query/Categories.graphql'
import categoryFragment from '@/graphql/fragment/category.graphql'
import QueryProducts from '@/graphql/Query/Products.graphql'

export default {
  data () {
    return {
      // categories: [],
      // activeIndex: 0,
      category: {},
      products: [],
      CDN: this.$CDN,
      goods: [{
        title: '标题',
        subtitle: '2018-09-28',
        media: 'https://pub-static.haozhaopian.net/static/web/site/features/cn/crop/images/crop_20a7dc7fbd29d679b456fa0f77bd9525d.jpg'
      }]
    }
  },
  components: {
    card
  },
  onLoad () {
    /* this.categories = this.$apollo.readQuery({
      query: QueryCategories
    }) */
    this.category = this.$apollo.readFragment({
      id: 'Category:' + this.$root.$mp.query.id,
      fragment: categoryFragment,
      fragmentName: 'category'
    })

    /* this.$apollo.query({
      query: QueryProducts,
      variables: {
        categoryId: this.$root.$mp.query.id
      }
    })
      .then(result => {
        console.log(result)
        this.products = result.data.products
      })
      .catch(error => {
        console.log(error)
      }) */

    this.$apollo.queryLoading({
      query: QueryProducts,
      variables: {
        categoryId: this.$root.$mp.query.id
      }
    }, result => {
      // console.log(result)
      this.products = result.data.products
    }, () => {
      wx.showToast({
        icon: 'none',
        title: '获取内容出错, 请重试'
      })
    })
  }
}
</script>

<style>
.list_panel {
  display: flex;
  flex-wrap: wrap;
}
.list {
  width: calc(100% / 2 - 8px);
  padding-left: 4px;
  padding-right: 4px;
}
</style>
